<template>
  <div class="vx-upload-files">
    <div class="import-left">
      <ui-upload
        class="upload-demo"
        :action="address"
        drag
        multiple
        :limit="1"
        :file-list="fileList"
        :before-upload="beforeUpload"
        :on-success="successUpload"
        :on-error="uploadError"
        :on-remove="deleteList"
      >
        <img src="./image/upload.png" alt />
        <span>点击上传或将文件拖拽到这上传</span>
      </ui-upload>
    </div>
    <div class="import-cen">
      <img src="./image/BatchDownload.png" />
      <a href id="text-size">下载批量转账模板</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'vx-upload-file',
  props: {
    address: {
      type: String,
      default: '',
    },
    fileList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      succUpload: false,
    };
  },
  methods: {
    beforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
      const xls = testmsg === 'xls';
      const xlsx = testmsg === 'xlsx';
      const txt = testmsg === 'txt';
      const csv = testmsg === 'csv';

      var bool = false;
      if (xls || xlsx || txt || csv) {
        bool = true;
      } else {
        bool = false;
      }
      if (!bool) {
        this.$alert(`上传文件格式错误!`);
      }

      return bool;
    },
    // 上传成功的回调
    successUpload(response, file, fileList) {
      if (response) {
        this.succUpload = true;
        this.$emit('beforeUpload', response, file, fileList);
      }
    },
    // 上传错误回调
    uploadError(error, file, fileList) {
      this.$emit('uploadError', error, file, fileList);
    },
    // 删除已上传的文件时  状态修改
    deleteList(file, fileList) {
      this.succUpload = false;
      this.$emit('deleteList', file, fileList);
    },
  },
};
</script>

<style lang="scss">
.vx-upload-files {
  position: relative;
  display: flex;
  width: 550px;

  .ui-upload-dragger {
    width: 260px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    & > img {
      vertical-align: middle;
      margin-right: 10px;
    }
  }
  .import-left {
    width: 260px;
    height: 60px;
    background: #fafafa;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
    color: #4072ee;
  }
  .import-cen {
    width: 160px;
    height: 60px;
    margin-left: 19px;
    display: flex;
    img {
      width: 20px;
      height: 20px;
    }
    div:nth-child(1) #text-size {
      font-size: 14px;
      color: #4072ee;
      text-decoration: underline;
    }
  }
  .ui-upload-list {
    position: absolute;
    left: 260px;
    top: 20px;
    width: 35%;
  }
}
</style>
